<template>
  <!-- 轮播图所在行 -->
  <van-row>
    <van-col :span="24">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" lazy-render class="my-swipe" >
        <!-- 轮播图项  循环images展示不同的图片   图片链接就是我们之前上传在服务端的图片 -->
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </van-col>
  </van-row>

  <!-- 页面图标导航 -->
  <van-row style="margin-top: 20px;">
    <van-col :span="8" align="center" @click="toSearch">
        <div><img class="icon" src="../assets/businessIcon.png"></div>
        <div class="iconText">商家</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/foodIcon.png"></div>
        <div class="iconText">餐品</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/cartIcon.png"></div>
        <div class="iconText">餐车</div>
    </van-col>
  </van-row>

  <van-row style="margin-top: 20px;">
    <van-col :span="8" align="center" @click="showOrder">
        <div><img class="icon" src="../assets/orderIcon.png"></div>
        <div class="iconText">订单</div>
    </van-col>
    <van-col :span="8" align="center" @click="showAddress">
        <div><img class="icon" src="../assets/addressIcon.png"></div>
        <div class="iconText">地址</div>
    </van-col>
    <van-col :span="8" align="center">
      <a href="javascript:scrollTo(0,800)">
        <div><img class="icon" src="../assets/tuijianIcon.png"></div>
        <div class="iconText">推荐</div>
      </a>
    </van-col>
  </van-row>


  <!-- 推荐的商家列表 -->
  <van-row style="margin-top: 20px;">
    <van-col :span="24" align="center" style="color: #555;">
       ---- 推荐商家 ----
    </van-col>
  </van-row>
  <van-row style="margin-top: 10px;">
    <van-col :span="24" align="center" >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
         <!-- 列表项 -->
          <van-row style="margin-top: 5px;" v-for="business in recommendBusinessList" :key="business.businessId">
            <van-col :span="8" align="center" >
                <img :src="business.businessImg" style="width: 60%;height: 60px;">
            </van-col>
            <van-col :span="16" align="left" >
                <div style="font-size: 16px;">{{business.businessName}}</div>
                <div style="font-size: 12px;">{{business.businessExplain}}</div>
                <div style="font-size: 12px;">{{business.businessAddress}}</div>
            </van-col>
          </van-row>
      </van-list>
    </van-col>
  </van-row>
</template>

<script setup>
import {ref,getCurrentInstance, onMounted} from 'vue';
import { showNotify } from 'vant';

   const {proxy} = getCurrentInstance();

    const images = ref([
      'http://localhost:8080/img/4bf1bee0a38744d08a82beac0ba1d3aeDSCN7881.JPG',
      'http://smk4ysaa0.hd-bkt.clouddn.com/22980c12618a4825ad6e0adb63a4184ccanguan003.jpg',
      'http://localhost:8080/img/884f980589004ee9b2ca494dc6482340DSCN7442.JPG',
      'http://smk4ysaa0.hd-bkt.clouddn.com/5c660588418948b2900a148d9bd21876canguan002.jpg',
    ]);


    const loading = ref(false);  //列表加载状态
    const finished = ref(false); //加载是否完成

  //推荐商家的列表
  const recommendBusinessList = ref([]);

  const getRecommendBusiness = ()=>{
    loading.value = true;
    proxy.$axios({
      method: 'get',
      url: '/business/recommend'
    }).then(res=>{
      let resultBean = res.data;
      if(resultBean.code == 200){
        recommendBusinessList.value = resultBean.data;
        loading.value = false;
        finished.value = true;
      }else{
        showNotify({ message: resultBean.msg });
      }
    }).catch(error=>{
       showNotify({ message: error.message });
    })
  }

  //商家图标跳转至发现页面-商家列表
  const toSearch = () => {
     proxy.$router.push('/main/search');
  };
  //地址图标跳转至地址
  //展示地址
const showAddress = ()=>{
  proxy.$router.push("/main/address");
}
const showOrder = ()=>{
  proxy.$router.push("/main/order");
}


  onMounted(()=>{
    //获取推荐商家
    getRecommendBusiness();
  })


</script>

<style scope>
  *{
    color: #555;
  }
  .my-swipe .van-swipe-item {
    width: 100%;
    text-align: center;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 250px;
  }

  .icon{
    width: 40%;
    cursor: pointer;
  }

  .icon:hover{
    opacity: 0.6;
  }

  .iconText{
    font-size: 12px;
    color: #555;
    font-family: 微软雅黑;
  }
</style>